<template>
  <div class="account">
    <div class="account_header">
      <div class="banber">
        <top-bar :barObj="barObj"/>
      </div>
    </div>
    <div class="acc_mian">
      <div class="title">
        <div
          class="item"
          :class="{'itemActive':item.id==iActive}"
          v-for="(item,index) in arr"
          :key="index"
          @click="clickItem(item)"
        >
          {{item.name}}
          <span v-show="item.id==iActive"></span>
        </div>
      </div>
      <my-fish-ball :myFishBallData="myFishBallData" v-show="iActive==1"/>
      <invite :inviteDirect="inviteDirect" :inviteAll="inviteAll" v-if="iActive==2"/>
      <fish-ball-detail :jLDetail="jLDetail" v-show="iActive==3"/>
    </div>
  </div>
</template>
<script>
import topBar from "@/components/topBar.vue";
import myFishBall from "./com/myfishBall";
import invite from "./com/invite";
import fishBallDetail from "./com/fishBallDetail";
import { GetZyHy, GetYaoQing, getJLDetail } from "../../api";
import { getGuid } from "../../utils/index";
import { Toast } from "mint-ui";
// import { Loadmore } from "mint-ui";
export default {
  name: "account",
  data() {
    return {
      barObj: {
        isBack: true,
        backVal: "账单明细",
        isIcon: true
      },
      iActive: 1,
      arr: [
        {
          name: "我的章鱼丸",
          id: 1
        },
        {
          name: "邀请明细",
          id: 2
        },
        {
          name: "章鱼丸明细",
          id: 3
        }
      ],
      myFishBallData: {},
      id: localStorage.zyUserId,
      inviteAll: {},
      inviteDirect: {},
      jLDetail: [],
      pageSize: "10"
    };
  },
  mounted() {
    this.zyHyIndexModel();
    // this.yaoQingList("0");
    // this.yaoQingList("1");
    this.getJL();
    this.iActive = this.$route.query.type ? this.$route.query.type : 1;
  },
  components: {
    topBar,
    myFishBall,
    invite,
    fishBallDetail
    // "v-loadmore": Loadmore
  },
  methods: {
    clickItem(i) {
      this.iActive = i.id;
    },
    zyHyIndexModel() {
      GetZyHy({
        ID: this.id,
        LoginMachine: getGuid()
      }).then(res => {
        if (res.data.Success) {
          console.log(res.data.EntityList[0]);
          this.myFishBallData = res.data.EntityList[0];
        } else {
          Toast({
            message: res.data.Content,
            duration: 3000
          });
        }
      });
    },
    yaoQingList(type) {
      GetYaoQing({
        ID: this.id,
        LoginMachine: getGuid(),
        YJEYhOld: "",
        YJEYhNew: "",
        PageSize: this.pageSize,
        PageNo: "0",
        RegType: type
      }).then(res => {
        if (res.data.Success) {
          if (type == 0) {
            this.inviteAll = Object.assign({}, res.data.EntityList[0]);
          }
          if (type == 1) {
            this.inviteDirect = Object.assign({}, res.data.EntityList[0]);
          }
        } else {
          Toast({
            message: res.data.Content,
            duration: 3000
          });
        }
      });
    },
    getJL() {
      getJLDetail({
        ID: this.id,
        LoginMachine: getGuid()
      }).then(res => {
        if (res.data.Success) {
          this.jLDetail = res.data.EntityList;
        } else {
          Toast({
            message: res.data.Content,
            duration: 3000
          });
        }
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
.account {
  width: 100%;
  position: relative;

  .account_header {
    width: 100%;
    height: 7rem;
    background: linear-gradient(-12deg, rgba(21, 22, 27, 1), rgba(36, 38, 43, 1), rgba(77, 79, 96, 1));

    .banber {
      padding-top: 0.54rem;
      box-sizing: border-box;
      width: 100%;
      height: 6rem;
      background: url('./img/bell_btm.png');
      background-size: 100% 100%;
    }
  }

  .acc_mian {
    position: absolute;
    width: 100%;
    margin: 0 auto;
    top: 1.5rem;
    left: 0;

    .title {
      width: 90%;
      margin: 10px auto 30px auto;
      display: flex;
      text-align: center;

      .item {
        flex-grow: 1;
        font-size: 16px;
        font-family: 'HYg1gj';
        color: rgba(255, 255, 255, 1);
        position: relative;

        span {
          width: 20px;
          height: 2px;
          background: #fff;
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
        }
      }

      .itemActive {
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        -webkit-text-stroke: 1px undefined;
        text-stroke: 1px undefined;
        font-family: 'PingFang-SC-Medium';
      }
    }
  }
}
</style>

